<template>
  <div class="box">
    <div class="box_header"></div>
    <div class="box_left"></div>
    <div class="box_right"></div>
    <div class="box_bottom">
      <NavTabVue></NavTabVue>
    </div>
  </div>
</template>

<script setup>
import NavTabVue from "../components/layout/NavTab.vue";
</script>

<style lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  background: url("../assets/images/pageBg.png") no-repeat;
  background-size: 100% 100%;

  .box_header {
    width: 100%;
    height: 10%;
    background: url("../imgs/top.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .box_left {
    width: 30%;
    height: 100vh;
    background: url("../imgs/left.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box_right {
    width: 30%;
    height: 100vh;
    background: url("../imgs/right.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .box_bottom {
    width: 70%;
    height: 13%;
    margin: 0 15%;
    background: url("../assets/images/nav.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 200;
  }
}
</style>
